<template>
    <div id="app">
        <!-- 3 使用 -->
        <Child :title="msg" @child-click="handlerChildClick"/>
        <to-do-list @add-list="addList" @remove-all="removeAll"/>
            <div class="box">
                <ul v-for="(item,index) in listData" :key="index">
                    <li>{{index+1}} -- {{item}}</li>
                    </ul>
            </div>
    </div>
</template>
<script>
import { ref } from "vue";
// 1 引入
import Child from "./components/Child.vue";
import ToDoList from "./components/ToDoList.vue";
export default {
    components:{ Child,ToDoList },// 2 注册
    setup(){
        const msg=ref("我是父组件的值");
        const listData=ref([]);

        const handlerChildClick = msg =>{
            alert(msg);
        };
        //添加数据
        const addList=value=>{
            listData.value.push(value);
        }
        //重置清单
        const removeAll=()=>{
            listData.value=[];
        }
        return{
            msg,
            listData,
            handlerChildClick,
            addList,
            removeAll
        }

    }
}
</script>
<style scoped>
    .box{
        width: 400px;
        height: 500px;
    }
</style>